<template>
  <!-- 商品分类栏 -->
  <view class="goods-classify">
    <text v-for="(item, index) in props.classify"
      :class="{ 'goods-classify-choose': props.index ? props.index == index : classifyChoose === index }" :key="index"
      @click="goodsClassifyChoose(index)">{{ item }}</text>
  </view>
</template>

<script lang="ts" setup>
import type { ChooseClassifyData } from "../../config/data/data"
import {
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onActivated,
  onDeactivated,
  onUnmounted,
  ref,
  defineProps,
  defineEmits,
} from 'vue'

//自定义事件
const emit = defineEmits(['chooseClassify'])

//接受上级的商品列表数据
const props = defineProps<{
  classify: string[],
  index?: number,
}>();

//当前选中商品列表分类下标
const classifyChoose = ref(0);


//goodsClassifyChoose事件提交的数据类型
const goodsClassifyChooseData = ref<ChooseClassifyData>({ msg: '', content: '' });

//点击选中商品列表分类事件
const goodsClassifyChoose = (index: number) => {
  classifyChoose.value = index;
  goodsClassifyChooseData.value.msg = "分类";
  goodsClassifyChooseData.value.content = props.classify[index];
  emit('chooseClassify', goodsClassifyChooseData.value);
};




// 组件周期函数--监听组件挂载完毕
onMounted(() => {


});

// 组件周期函数--监听组件数据更新之前
onBeforeUpdate(() => { });

// 组件周期函数--监听组件数据更新之后
onUpdated(() => { });

// 组件周期函数--监听组件激活(显示)
onActivated(() => { });

// 组件周期函数--监听组件停用(隐藏)
onDeactivated(() => { });

// 组件周期函数--监听组件销毁之前
onUnmounted(() => { });
</script>

<style scoped lang="scss">
view,
text {
  word-break: break-all;
}


.goods-classify {
  position: sticky;
  top: 0;
  width: 100%;
  font-size: 30rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: $uni-bg-color-mask;
  background-color: $uni-box-color;
  z-index: 3;

  text {
    position: relative;
    min-width: 80rpx;
    text-align: center;
    color: $uni-text-color;
  }

  .goods-classify-choose {
    padding: 20rpx 0;
    color: $uni-color-error;
  }

  .goods-classify-choose::after {
    position: absolute;
    bottom: 0rpx;
    left: 0;
    content: "";
    display: inline-block;
    width: 100%;
    height: 6rpx;
    border-left: 50%;
    border-right: 50%;
    background-color: red;
    border-radius: 4rpx;
    animation: middle .2s ease-out 0s 1 forwards;
  }
}




//从中间向两边展开
@keyframes middle {
  0% {
    transform: scaleX(0);
  }

  100% {
    transform: scaleX(1);
  }

}
</style>